<template>
  <div>
    <!-- 查询框 -->
    <div style="margin: 10px 10px 5px 5px;">
      <a-select style="width:13em!important;float: left; padding-right:2px;" v-model="queryParams.prodId" placeholder="产品" allowClear>
        <a-select-option value="1000">移动电话</a-select-option>
        <a-select-option value="1100">普通电话</a-select-option>
      </a-select>
      <a-select style="width:13em!important;float: left; padding-right:2px;" v-model="queryParams.custId" placeholder="客户" allowClear>
        <a-select-option :value="cust.custId" v-for="(cust,index) in custs" :key="index">
          {{cust.custName}}
        </a-select-option>
      </a-select>
      <a-input style="width:13em!important;float: left;" v-model="queryParams.accNum" placeholder="设备号" allowClear/>
      <a-button type="primary"  @click="search()">搜索</a-button>
      <a-button type="primary"  @click="showModal('add')">
        <a-icon type="plus-circle" />新增
      </a-button>
    </div>
    <!-- 表格显示 -->
    <div style="position:relative">
      <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" rowKey='prodInstId'>
        <span slot="prodId" slot-scope="text" >
          {{tranProd(text)}}
        </span>
        <template slot="operation" slot-scope="text, record">
          <a v-if="dataSource.length" class="tab-op-tbn" @click="showModModal(record)">
            <a-tag color="blue">修改</a-tag>
          </a>
          <a v-if="dataSource.length" class="tab-op-tbn" @click="showDelModal(record)">
            <a-tag color="blue">删除</a-tag>
          </a>
        </template>
      </a-table>
      <!--      <a-pagination v-if="dataSource && dataSource.length>0" :pageSizeOptions="pageSizeOptions" :total="total"-->
      <!--        showSizeChanger :pageSize="pageSize" v-model="current"-->
      <!--        :show-total="(total, range) => `${range[0]}-${range[1]}条， 共 ${total} 条`" @showSizeChange="onShowSizeChange"-->
      <!--        class="panel-body-page" showQuickJumper @change="onChange">-->
      <!--      </a-pagination>-->
    </div>

    <!-- 增改 -->
    <modal-edit :visibleModal="visible" :selectedRows="selectedRows"
                :custs="custs"
                @visibleChange="visibleChange"
                @refresh="refresh" />
  </div>
</template>

<script>
  import prodInstApi from '@/api/prod-inst'
  import custApi from '@/api/cust'
  import modalEdit from './components/modal-edit'
  export default {
    name: 'index',
    components: {
      modalEdit
    },
    data() {
      return {
        loading: false,
        dataSource: [],
        columns: [{
            title: '设备号',
            dataIndex: 'accNum',
          },
          {
            title: '产品',
            dataIndex: 'prodId',
            scopedSlots: {
              customRender: 'prodId'
            }
          },
          {
            title: '客户名称',
            dataIndex: 'custName',
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: {
              customRender: 'operation'
            }
          }
        ],
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        current: 1,
        pageSize: 10,
        total: 10,
        // 查询参数
        queryParams: {
          accNUm: null,
          prodId: undefined,
          custId: undefined,
        },
        // 选中
        selectedRowKeys: [],
        custs:[],
        // 增删改
        visible: false,
        deleteDisabled: true,
        selectedRows: null,
        searchType: 'down',
      }
    },
    mounted() {
      this.queryCusts();
    },
    methods: {
      queryCusts(){
        custApi.queryCusts({}, data => {
            this.loading = false
            if (data) {
              this.custs = data
            }
          })
      },
      tranProd(val) {
        if("1000" == val){
          return "移动电话";
        }else if("1100" == val){
          return "普通电话";
        }
        return val
      },
      visibleChange(e) {
        if (e === '1') {
          this.visible = false
        }
      },
      refresh() {
        this.queryProdInsts()
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      search() {
        this.queryProdInsts()
      },
      showModal(val) {
        let self = this
        switch (val) {
          case 'add':
            this.visible = true
            this.selectedRows = []
            break
          case 'mod':
            this.visible = true
            break
          case 'del':
            this.$confirm({
              title: '确定删除?',
              // content: 'When clicked the OK button, this dialog will be closed after 1 second',
              okText: '确认',
              okType: 'danger',
              cancelText: '取消',
              onOk() {
                self.setDelProdInst()
              },
              onCancel() {}
            })
            break
          default:
            break
        }
      },
      setDelProdInst() {
        let self = this
        prodInstApi.delProdInst(this.selectedRows[0].prodInstId, data => {
          self.$success({
            title: '提示',
            content: '删除成功'
          })
          self.deleteDisabled = true
          self.queryProdInsts()
        })
       },
      showModModal(e) {
        this.selectedRows = []
        this.selectedRows.push(e)
        this.showModal('mod')
      },
      showDelModal(e) {
        this.selectedRows = []
        this.selectedRows.push(e)
        this.showModal('del')
      },
      onChange(pageNumber) {
        this.current = pageNumber
        this.queryPageBulletins()
      },
      queryProdInsts() {
        let params = {
          pageSize: this.pageSize,
          pageNum: this.current
        }
        if (this.queryParams.prodId) {
          params.prodId = this.queryParams.prodId
        }
        if (this.queryParams.accNum) {
          params.accNum = this.queryParams.accNum
        }
        if (this.queryParams.custId) {
          params.custId = this.queryParams.custId
        }
        this.loading = true
        prodInstApi.queryProdInsts(params, data => {
          this.loading = false
          if (data) {
            this.dataSource = data
          }
        })
      },

    }
  }

</script>

<style scoped>

</style>
